<template>
    <div>
        <el-dialog :title="form.id ? '编辑区域' : '新增区域'" width="40%" :show-close="false"
            :visible.sync="dialogFormVisible" :close-on-click-modal="false" style="height: 100%;"
            custom-class="customclassdialog">
            <el-form :model="form" v-loading="loading" element-loading-text="加载中..."
                element-loading-spinner="el-icon-loading">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="区域图片:" :label-width="formLabelWidth">
                            <div class="editHeld_conter_left">
                                <el-upload class="avatar-uploader" :show-file-list="false" :headers="token"
                                    :action="urlsd+'/api/admin/upload-img'" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <div v-if="form.image_all" class="avatar">
                                        <img :src="form.image_all">
                                        <div>点击更换</div>
                                    </div>
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    <div slot="tip" class="el-upload__tip">建议尺寸：800*800px</div>
                                </el-upload>
                            </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-row>
                            <el-col>
                                <el-form-item label="区域名称:" :label-width="formLabelWidth">
                                    <screenSelect title="" type='input' v-model="form.name" :isValue='form.name'
                                        placeholder="请输入" @transfer="valueHeld($event, 'name')" width='100%'
                                        position="top" :isBorder="untenFun(form.name)" />
                                    <div class="unten" v-if="untenFun(form.name)">请输入区域名称</div>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="所属企业:" :label-width="formLabelWidth">
                                    <screenSelect title="" type='select' v-model="form.admin_id"
                                        :isValue='form.admin_id' placeholder="请选择"
                                        @transfer="valueHeld($event, 'admin_id')" :options="enterpriseoptions"
                                        position="top" width='100%' :isBorder="untenFun(form.admin_id)" />
                                    <div class="unten" v-if="untenFun(form.admin_id)">请选择所属企业</div>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="所属电站:" :label-width="formLabelWidth">
                                    <screenSelect title="" type='select' v-model="form.base_station_id"
                                        :isValue='form.base_station_id' placeholder="请选择"
                                        @transfer="valueHeld($event, 'base_station_id')" :options="powerstationoptions"
                                        position="top" width='100%' :isBorder="untenFun(form.base_station_id)" />
                                    <div class="unten" v-if="untenFun(form.base_station_id)">请选择所属电站</div>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="区域地址:" :label-width="formLabelWidth">
                                    <screenSelect title="" type='input' v-model="form.address" :isValue='form.address'
                                        placeholder="请输入" @transfer="valueHeld($event, 'address')" width='100%'
                                        position="top" :isBorder="untenFun(form.address)" />
                                    <div class="unten" v-if="untenFun(form.address)">请输入区域地址</div>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="备注:" :label-width="formLabelWidth">
                                    <screenSelect title="" type='textarea' v-model="form.des" :isValue='form.des'
                                        placeholder="请输入" @transfer="valueHeld($event, 'des')" width='100%'
                                        position="top" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-repeatStop="{ func: cancel, delay: '2000' }">关 闭</el-button>
                <el-button type="primary" v-repeatStop="{ func: save, delay: '2000' }">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import screenSelect from '@/components/screenSelect/index.vue';
import { getqiyeList, getDianzhanList } from '@/api/common.js'
import { getToken } from '@/utils/auth'
export default {
    name: 'WorkspaceJsonAddcomponents',
    components: {
        screenSelect
    },
    props: {
        optionVal: {
            type: Object
        },
        dialogFormVisible: {
            type: Boolean
        },
        enterpriseoptions: {
            type: Array
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = JSON.parse(JSON.stringify(ne))
            },
            deep: true,
            immediate: true
        },
        'form.admin_id': {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.getDzList()
                }
            },
            deep: true,
            immediate: true
        },
    },
    data() {
        return {
            formLabelWidth: '100px',
            token: {},
            form: {
                admin_id: ''
            },
            imageUrl: '',
            powerstationoptions: [],
            loading: false,
            isUnten: false,
            urlsd:process.env.NODE_ENV=='development'?'':process.env.VUE_APP_BASE_API
        };
    },
    mounted() {
        this.token = {
            "Authorization": getToken()
        }
        
    },
    methods: {
        untenFun(data) {
            if (this.isUnten) {
                if (data == undefined) {
                    return true
                } else {
                    if (data == '' && data != '0') {
                        return true
                    } else {
                        return false
                    }
                }
            } else {
                return false
            }

        },
        getDzList() {
            this.loading = true
            let data = {}
            data.type = 2
            data.id = this.form.admin_id
            getDianzhanList(data).then(res => {
                if (res.code == 200) {
                    this.loading = false
                    res.data.map(item => {
                        item.label = item.name
                        item.value = item.id
                    })
                    this.powerstationoptions = res.data
                    if (!this.powerstationoptions.some(x => { return x.id == this.form.base_station_id })) {
                        this.form.base_station_id = ''
                    }
                }
            })
        },
        valueHeld(childParam, fatherparam) {
            this.isUnten = false
            this.form[fatherparam] = childParam
        },
        cancel() {
            let e = {}
            e.dialogFormVisible = false
            e.form = this.form
            this.$emit('updata', e);
        },
        save() {
            this.isUnten = true
            let e = {}
            let that = this
            e.dialogFormVisible = false
            e.form = that.form
            console.log(e.form);

            for (let key in e.form) {
                if (key != 'des') {
                    if (e.form[key] === '' || e.form[key] === undefined) {
                        return false
                    }
                }

            }

            this.$emit('addupdata', e);
        },
        handleAvatarSuccess(res, file) {
            let that = this
            if (that.form.id) {
                if (res.code == 200) {
                    that.form.image = res.data.img_path
                    that.form.image_all = res.data.img_path_all
                }
            } else {
                let form = JSON.parse(JSON.stringify(that.form))
                if (res.code == 200) {
                    form.image_all = res.data.img_path_all
                    form.image = res.data.img_path
                    that.form = form
                }
            }

        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$modal.msgError('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
                this.$modal.msgError('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M;
        }
    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from {
//         opacity: 0;
//         transform: translateY(-100%);
//     }

//     to {
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }

// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }

::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.editHeld_conter_left .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 180px;
    line-height: 180px;
    text-align: center;
}

.editHeld_conter_left .avatar {
    width: 180px;
    height: 180px;
    display: block;
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }

    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000066;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
    }
}
</style>